<!DOCTYPE html>
<html lang="en">
    <head>
        <title>General UI - Stilearn Metro Admin Bootstrap</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="stilearn metro admin bootstrap" />
        <meta name="author" content="stilearning" />
        
        
        <!-- styles -->
        <link href="css/bootstrap.css" rel="stylesheet" />
        <link href="css/bootstrap-responsive.css" rel="stylesheet" />
        <!-- default theme -->
        <link href="css/metro-bootstrap.css" rel="stylesheet" />
        <link href="css/metro.css" rel="stylesheet" />
        <link href="css/metro-responsive.css" rel="stylesheet" />
        <link href="css/metro-helper.css" rel="stylesheet" />
        <link href="css/font-awesome.css" rel="stylesheet" />
        
        
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
          <script src="js/lte-ie7.js"></script>
        <![endif]-->
        
        <!-- fav and touch icons -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
        <link rel="shortcut icon" href="ico/favicon.png" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
    <body>
        <!-- start header-->
        <header class="header">
            <!-- start navbar, this navbar on top -->
            <div id="navbar-top" class="navbar navbar-cyan">
                <!-- navbar inner-->
                <div class="navbar-inner">
                    <!-- container-->
                    <div class="container">
                        
                        <!--this btn-navbar contains the menu on the side-left, will be seen on portrait tablet and less. -->
                        <a class="btn btn-navbar help-inline" data-toggle="collapse" data-target="#navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        
                        <!-- Your brand here, images or text -->
                        <a class="brand" href="index.html">
                            <!-- just a sample brand, replace with your own -->
                            <i class="aweso-th-large"></i> Stilearn
                        </a>
                        
                        <!-- Un-collapse nav -->
                        <div class="nav-uncollapse">
                            <!-- pull left menu-->
                            <ul class="nav pull-left hidden-phone">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="aweso-plus-sign aweso-large"></i> &nbsp;Create <i class="aweso-angle-down"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                        <li><a tabindex="-1" href="#">Page</a></li>
                                        <li><a tabindex="-1" href="#">Post</a></li>
                                        <li><a tabindex="-1" href="#">User</a></li>
                                        <li class="divider"></li>
                                        <li><a tabindex="-1" href="#">Task</a></li>
                                        <li><a tabindex="-1" href="#">Create Something</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <input class="hide" type="file" name="upload-files" />
                                    <a href="#" data-toggle="upload" data-target="upload-files"><i class="aweso-upload aweso-large"></i> &nbsp;Upload</a>
                                </li>
                            </ul><!--/pull left menu-->

                            <!-- pull right menu-->
                            <ul class="nav pull-right">
                                <!-- notification -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <div class="label">3</div>
                                        <i class="aweso-bell-alt"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">You have 4 new notofications</li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">Just Now</small> Update version</h4>
                                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">5 minutes</small> Jane Smith</h4>
                                                        <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">3 hours</small> New comment</h4>
                                                        <p>Tellus ac cursus commodo, tortor mauris condimentum nibh...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> See all notifications</a>
                                        </li>
                                    </ul>
                                </li><!-- /notification -->
                                
                                <!-- task -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <div class="label">5</div>
                                        <i class="aweso-tasks"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">You have 6 tasks</li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">20%</small> upload some file</h4>
                                                        <div class="progress progress-info">
                                                            <div class="bar" style="width: 20%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">40%</small>  <span class="text-error">paused!</span> do something</h4>
                                                        <div class="progress progress-warning">
                                                            <div class="bar" style="width: 40%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">60%</small> do another task</h4>
                                                        <div class="progress progress-info">
                                                            <div class="bar" style="width: 60%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">80%</small> <span class="text-error">failed!</span> upload some file</h4>
                                                        <div class="progress progress-danger">
                                                            <div class="bar" style="width: 80%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">100%</small> <span class="text-success">done!</span> another task</h4>
                                                        <div class="progress progress-success">
                                                            <div class="bar" style="width: 100%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> See all tasks</a>
                                        </li>
                                    </ul>
                                </li><!-- /task -->
                                
                                <!-- settings -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="aweso-cog"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" data-dropdown="no-propagation" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">General settings</li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-columns"></i></div>
                                                <div class="content">Fluid Layout</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="layout-mode" name="layout-mode" checked="" />
                                                        <label for="layout-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="backgrounds hide">
                                            <div class="setting-list">
                                                <div class="background-label">Backgrounds</div>
                                                <div class="background-choice">
                                                    <a href="#" class="bg-item bg-black" data-bg="noimage"></a>
                                                    <a href="#" class="bg-item bg-1" data-bg="01.jpg"></a>
                                                    <a href="#" class="bg-item bg-2" data-bg="02.jpg"></a>
                                                    <a href="#" class="bg-item bg-3" data-bg="03.jpg"></a>
                                                    <a href="#" class="bg-item bg-4" data-bg="04.jpg"></a>
                                                    <a href="#" class="bg-item bg-5" data-bg="05.jpg"></a>
                                                    <a href="#" class="bg-item bg-6" data-bg="06.jpg"></a>
                                                    <a href="#" class="bg-item bg-7" data-bg="07.jpg"></a>
                                                    <a href="#" class="bg-item bg-8" data-bg="08.jpg"></a>
                                                    <a href="#" class="bg-item bg-9" data-bg="09.jpg"></a>
                                                    <a href="#" class="bg-item bg-10" data-bg="10.jpg"></a>
                                                    <a href="#" class="bg-item bg-11" data-bg="11.jpg"></a>
                                                    <a href="#" class="bg-item bg-12" data-bg="12.jpg"></a>
                                                    <a href="#" class="bg-item bg-13" data-bg="13.jpg"></a>
                                                    <a href="#" class="bg-item bg-14" data-bg="14.jpg"></a>
                                                    <a href="#" class="bg-item bg-15" data-bg="15.jpg"></a>
                                                    <a href="#" class="bg-item bg-16" data-bg="16.jpg"></a>
                                                    <a href="#" class="bg-item bg-17" data-bg="17.jpg"></a>
                                                    <a href="#" class="bg-item bg-18" data-bg="18.jpg"></a>
                                                    <a href="#" class="bg-item bg-19" data-bg="19.jpg"></a>
                                                    <a href="#" class="bg-item bg-20" data-bg="20.jpg"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-pushpin"></i></div>
                                                <div class="content">Fixed Header</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="header-mode" name="header-mode" />
                                                        <label for="header-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-pushpin"></i></div>
                                                <div class="content">Fixed Sidebar</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="sidebar-mode" name="sidebar-mode" />
                                                        <label for="sidebar-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x color-silver aweso-sign-blank"></i></div>
                                                <div class="content">Light theme</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="radio" value="light" id="theme-light" name="theme-mode" checked="" />
                                                        <label for="theme-light"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-sign-blank"></i></div>
                                                <div class="content">Dark theme</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="radio" value="dark" id="theme-dark" name="theme-mode" />
                                                        <label for="theme-dark"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-tint"></i></div>
                                                <div class="content">Syncronize</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="syncronize-theme" name="syncronize-theme" checked="" />
                                                        <label for="syncronize-theme"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="syncronize">
                                            <div class="setting-list">
                                                <div class="themes-label">Theme colors</div>
                                                <div class="themes-choice">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="unsyncronize hide">
                                            <div class="setting-list">
                                                <div class="themes-label">Navbar colors</div>
                                                <div class="themes-choice themes-navbar">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="unsyncronize hide">
                                            <div class="setting-list">
                                                <div class="themes-label">Sidebar colors</div>
                                                <div class="themes-choice themes-sidebar">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> Settings page</a>
                                        </li>
                                    </ul>
                                </li><!-- /settings -->
                                
                                <!-- account -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        Bent Doe <i class="aweso-angle-down"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                        <li><a tabindex="-1" href="#">Profile</a></li>
                                        <li><a tabindex="-1" href="#">Activity</a></li>
                                        <li><a tabindex="-1" href="page-inbox.html">Inbox</a></li>
                                        <li class="divider"></li>
                                        <li><a tabindex="-1" href="page-login.html">Logout</a></li>
                                    </ul>
                                </li><!-- /account -->
                            </ul><!--/pull right menu-->
                        </div><!-- /uncollapse nav -->
                        
                        <!-- Everything you want hidden at 940px or less, leave it blank! (this use when side-left collapse) -->
                        <div id="navbar-collapse" class="nav-collapse collapse hidden-desktop"></div>
                        
                    </div><!--/container-->
                </div><!--/navbar-inner-->
                
            </div> <!--/ navbar-->
        </header> <!--/ end header-->
        
        <!-- start section content-->
        <section class="section-content">
            <!-- side left, its part to menu on left-->
            <div id="navside" class="side-left" data-collapse="navbar">
                <form class="form-inline search-module" action="?" method="post" />
                    <div class="input-append input-append-inline">
                        <input name="search" class="input-block-level" type="text" placeholder="Type to search" />
                        <button class="btn bg-cyan" type="button">
                            <i class="aweso-search"></i>
                        </button>
                    </div>
                </form>
                <!--nav, this structure create with nav (find the bootstrap doc about .nav list) -->
                <ul class="nav nav-list">
                    <li class="dropdown-list"> <!-- example use with dropdown list -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Dashboard</a>
                        <ul class="dropdown-menu">
                            <li><a href="index.html">Dashboard #1</a></li>
                            <li><a href="index2.html">Dashboard #2</a></li>
                            <li><a href="index3.html">Dashboard #3</a></li>
                            <li><a href="index4.html">Dashboard #4</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Layouts</a>
                        <ul class="dropdown-menu">
                            <li><a href="layout-blank.html">Blank</a></li>
                            <li><a href="layout-full-width.html">Full Width</a></li>
                            <li><a href="layout-top-menus.html">Top Menus</a></li>
                        </ul>
                    </li>
                    <li><a href="widgets.html">Widgets</a></li>
                    <li class="dropdown-list active">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Components</a>
                        <ul class="dropdown-menu">
                            <li class="active"><a href="ui-general.html">General</a></li>
                            <li><a href="ui-typography.html">Typography</a></li>
                            <li><a href="ui-buttons.html">Buttons</a></li>
                            <li><a href="ui-alert-notify.html">Alert & Notify</a></li>
                            <li><a href="ui-gauge.html">Gauge</a></li>
                            <li><a href="ui-calendar.html">Calendar</a></li>
                            <li><a href="ui-scrollbar.html">Scrollbar</a></li>
                            <li><a href="ui-tabs-collapse.html">Tabs & Collapses</a></li>
                            <li><a href="ui-sliders-bars.html">Sliders & Bars</a></li>
                            <li><a href="ui-tiles.html">Tiles</a></li>
                            <li><a href="ui-appbar.html">Appbar</a></li>
                            <li><a href="ui-splash-page.html">Splash Page</a></li>
                            <li><a href="ui-media-object.html">Media Object</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Form</a>
                        <ul class="dropdown-menu">
                            <li><a href="form-widget.html">Form Widget</a></li>
                            <li><a href="form-elements.html">Elements</a></li>
                            <li><a href="form-validation.html">Validation</a></li>
                            <li><a href="form-wizard.html">Wizard</a></li>
                            <li><a href="form-wysiwyg.html">Wysiwyg</a></li>
                            <li><a href="form-code-editor.html">Code editor</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="charts.html" class="dropdown-toggle" data-toggle="dropdown-list">Charts</a>
                        <ul class="dropdown-menu">
                            <li><a href="chart-line.html">Lines Charts</a></li>
                            <li><a href="chart-bar.html">Bar Charts</a></li>
                            <li><a href="chart-pie.html">Pie Charts</a></li>
                            <li><a href="chart-others.html">Other Charts</a></li>
                        </ul>
                    </li>
                    <li><a href="grids.html">Grids</a></li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Tables</a>
                        <ul class="dropdown-menu">
                            <li><a href="table-basic.html">Basic</a></li>
                            <li><a href="table-datatables.html">DataTables</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="icons.html"><span class="label">3</span> Icons</a>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Pages</a>
                        <ul class="dropdown-menu">
                            <li><a href="page-login.html">Login</a></li>
                            <li class="divider"></li>
                            <li><a href="page-search.html">Search</a></li>
                            <li><a href="page-invoices.html">Invoices</a></li>
                            <li><a href="page-inbox.html">Inbox</a></li>
                            <li><a href="page-gallery.html">Gallery</a></li>
                            <li class="divider"></li>
                            <li><a href="page-error-404.html">Error 404</a></li>
                            <li><a href="page-error-500.html">Error 500</a></li>
                            <li><a href="page-coming-soon.html">Coming Soon</a></li>
                        </ul>
                    </li>
                </ul><!--/ nav -->
            </div><!--/ side left-->
            
            
            
            <!-- start content -->
            <div class="content">
                <!-- content header -->
                <header class="content-header">
                    <!-- content action (optional)-->
                    <ul class="content-action pull-right">
                        <li>
                            <div class="btn-group">
                                <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
                                    Actions <i class="aweso-angle-down"></i>
                                </a>
                                <ul class="dropdown-menu black">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Some Action</a></li>
                                    <li><a href="#">Other Action</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Something else</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="btn-group" data-toggle="buttons-radio">
                                <button class="btn btn-link" data-content="widget"><i class="aweso-list-ul aweso-large" title="details view"></i></button>
                                <button class="btn btn-link" data-content="tile"><i class="aweso-th aweso-large" title="tile view"></i></button>
                            </div>
                        </li>
                        <li><button class="btn btn-link" data-toggle="button" data-content="toggle-pane"><i class="aweso-exchange aweso-large" title="toggle pane"></i></button></li>
                    </ul> <!-- /content action -->

                    <!-- content title-->
                    <div class="page-header"><h1>General UI</h1></div>

                    <!-- content breadcrumb -->
                    <ul class="breadcrumb breadcrumb-inline">
                        <li><a href="#">Home</a> <span class="divider"><i class="aweso-angle-right"></i></span></li>
                        <li class="active">General UI</li>
                    </ul>
                </header> <!--/ content header -->
                
                
                
                <!-- content page -->
                <article class="content-page">
                    <!-- main page, you're application here -->
                    <div class="main-page">
                        <div class="content-inner">
                            <!-- row #1 -->
                            <div class="row-fluid">
                                <!-- span left -->
                                <div class="span6">
                                    <!-- BREADCRUMBS
                                    ================================================== -->
                                    <!-- widget breadcrumbs -->
                                    <div class="widget bg-cyan" id="widget-breadcrumbs">
                                        <!-- widget header -->
                                        <div class="widget-header">
                                            <!-- widget icon -->
                                            <div class="widget-icon"><i class="aweso-magnet"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Breadcrumbs</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-breadcrumbs" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <p>A single example shown as it might be displayed across multiple pages.</p>
                                            <div class="stilearn-block-demo">
                                                <ul class="breadcrumb">
                                                    <li class="active">Home</li>
                                                </ul>
                                                <ul class="breadcrumb">
                                                    <li><a href="#">Home</a> <span class="divider"><i class="aweso-double-angle-right"></i></span></li>
                                                    <li class="active">Library</li>
                                                </ul>
                                                <ul class="breadcrumb" style="margin-bottom: 5px;">
                                                    <li><a href="#">Home</a> <span class="divider">//</span></li>
                                                    <li><a href="#">Library</a> <span class="divider">//</span></li>
                                                    <li class="active">Data</li>
                                                </ul>
                                            </div>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget breadcrumbs -->



                                    <!-- TOOLTIP & POPOVER
                                    ================================================== -->
                                    <!-- widget tooltip & popover -->
                                    <div class="widget bg-black" id="widget-tooltips">
                                        <!-- widget header -->
                                        <div class="widget-header">
                                            <!-- widget icon -->
                                            <div class="widget-icon"><i class="aweso-magnet"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Tooltip & Popover</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-tooltips" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <h2 id="tooltips">Tooltips</h2>
                                            <p>Hover over the links below to see tooltips:</p>
                                            <div class="stilearn-block-demo tooltip-demo">
                                                <a href="#" class="btn btn-small" data-toggle="tooltip" title="Tooltip on top">on top</a>
                                                <a href="#" class="btn btn-small" data-toggle="tooltip" data-placement="right" title="Tooltip on right">on right</a>
                                                <!--optional direction without data placement-->
                                                <a href="#" class="btn btn-small" data-toggle="tooltip-bottom" title="Tooltip on bottom">on bottom</a>
                                                <a href="#" class="btn btn-small" data-toggle="tooltip-left" title="Tooltip on left">on left</a>
                                            </div>

                                            <!-- popover -->
                                            <h2>Popovers</h2>
                                            <p>Add small overlays of content, to any element for housing secondary information. <strong>Requires Tooltip to be included.</strong></p>
                                            <div class="stilearn-block-demo tooltip-demo color-black">
                                                <a href="#" class="btn btn-small" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">on top</a>
                                                <a href="#" class="btn btn-small" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">on right</a>
                                                <a href="#" class="btn btn-small" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">on bottom</a>
                                                <a href="#" class="btn btn-small" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">on left</a>
                                            </div>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget tooltips & popover -->



                                    <!-- PAGINATION
                                    ================================================== -->
                                    <!-- widget pagination -->
                                    <div class="widget bg-brown" id="widget-pagination">
                                        <!-- widget header -->
                                        <div class="widget-header">
                                            <!-- widget icon -->
                                            <div class="widget-icon"><i class="aweso-magnet"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Pagination</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-pagination" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <p>Simple pagination, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
                                            <div class="stilearn-block-demo">
                                                <div class="pagination">
                                                    <ul>
                                                        <li><a href="#">&laquo;</a></li>
                                                        <li><a href="#">1</a></li>
                                                        <li><a href="#">2</a></li>
                                                        <li><a href="#">3</a></li>
                                                        <li><a href="#">4</a></li>
                                                        <li><a href="#">5</a></li>
                                                        <li><a href="#">&raquo;</a></li>
                                                    </ul>
                                                    <h4>Disabled and active states</h4>
                                                    <ul>
                                                        <li class="disabled"><a href="#">&laquo;</a></li>
                                                        <li class="active"><a href="#">1</a></li>
                                                        <li><a href="#">2</a></li>
                                                        <li><a href="#">3</a></li>
                                                        <li><a href="#">4</a></li>
                                                        <li><a href="#">5</a></li>
                                                        <li><a href="#">&raquo;</a></li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <!-- Sizes -->
                                            <h3>Sizes</h3>
                                            <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
                                            <div class="stilearn-block-demo">
                                                <div class="pagination pagination-large">
                                                    <ul>
                                                        <li><a href="#">&laquo;</a></li>
                                                        <li><a href="#">1</a></li>
                                                        <li><a href="#">2</a></li>
                                                        <li><a href="#">3</a></li>
                                                        <li><a href="#">&raquo;</a></li>
                                                    </ul>
                                                </div>
                                                <div class="pagination">
                                                    <ul>
                                                        <li><a href="#">&laquo;</a></li>
                                                        <li><a href="#">1</a></li>
                                                        <li><a href="#">2</a></li>
                                                        <li><a href="#">3</a></li>
                                                        <li><a href="#">4</a></li>
                                                        <li><a href="#">5</a></li>
                                                        <li><a href="#">&raquo;</a></li>
                                                    </ul>
                                                </div>
                                                <div class="pagination pagination-small">
                                                    <ul>
                                                        <li><a href="#">&laquo;</a></li>
                                                        <li><a href="#">1</a></li>
                                                        <li><a href="#">2</a></li>
                                                        <li><a href="#">3</a></li>
                                                        <li><a href="#">4</a></li>
                                                        <li><a href="#">5</a></li>
                                                        <li><a href="#">&raquo;</a></li>
                                                    </ul>
                                                </div>
                                                <div class="pagination pagination-mini">
                                                    <ul>
                                                        <li><a href="#">&laquo;</a></li>
                                                        <li><a href="#">1</a></li>
                                                        <li><a href="#">2</a></li>
                                                        <li><a href="#">3</a></li>
                                                        <li><a href="#">4</a></li>
                                                        <li><a href="#">5</a></li>
                                                        <li><a href="#">&raquo;</a></li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <!-- alignment -->
                                            <h3>Alignment</h3>
                                            <p>Add one of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p>
                                            <div class="stilearn-block-demo">
                                                <p class="lead">center</p>
                                                <div class="pagination pagination-centered">
                                                    <ul>
                                                        <li><a href="#">&laquo;</a></li>
                                                        <li><a href="#">1</a></li>
                                                        <li><a href="#">2</a></li>
                                                        <li><a href="#">3</a></li>
                                                        <li><a href="#">4</a></li>
                                                        <li><a href="#">5</a></li>
                                                        <li><a href="#">&raquo;</a></li>
                                                    </ul>
                                                </div>
                                                <p class="lead">Right</p>
                                                <div class="pagination pagination-right">
                                                    <ul>
                                                        <li><a href="#">&laquo;</a></li>
                                                        <li><a href="#">1</a></li>
                                                        <li><a href="#">2</a></li>
                                                        <li><a href="#">3</a></li>
                                                        <li><a href="#">4</a></li>
                                                        <li><a href="#">5</a></li>
                                                        <li><a href="#">&raquo;</a></li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <!-- pager -->
                                            <h2>Pager</h2>
                                            <p>Quick previous and next links for simple pagination implementations with light markup and styles.</p>
                                            <div class="stilearn-block-demo">
                                                <p class="lead">By default, the pager centers links.</p>
                                                <ul class="pager">
                                                    <li><a href="#">Previous</a></li>
                                                    <li><a href="#">Next</a></li>
                                                </ul>
                                                <p class="lead">Alternatively, you can align each link to the sides:</p>
                                                <ul class="pager">
                                                    <li class="previous"><a href="#">&larr; Older</a></li>
                                                    <li class="next"><a href="#">Newer &rarr;</a></li>
                                                </ul>
                                                <p class="lead">Optional disabled state</p>
                                                <ul class="pager">
                                                    <li class="previous disabled"><a href="#">&larr; Older</a></li>
                                                    <li class="next"><a href="#">Newer &rarr;</a></li>
                                                </ul>
                                            </div>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget pagination -->

                                </div><!-- /span left -->


                                <!-- span right -->
                                <div class="span6">
                                    <!-- MODAL
                                    ================================================== -->
                                    <!-- sample modal #1 -->
                                    <div id="defaultModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="sampleModal1" aria-hidden="true">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h3 id="sampleModal1">Modal Heading</h3>
                                        </div>
                                        <div class="modal-body">
                                            <h4>Text in a modal</h4>
                                            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>

                                            <h4>Popover in a modal</h4>
                                            <p>This <a href="#" role="button" data-toggle="popover" class="btn" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>

                                            <h4>Tooltips in a modal</h4>
                                            <p><a href="#" data-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-toggle="tooltip-right" title="Tooltip">that link</a> should have tooltips on hover.</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn" data-dismiss="modal">Close</button>
                                            <button class="btn bg-mauve">Save changes</button>
                                        </div>
                                    </div><!-- /sample modal #1 -->

                                    <!-- sample modal #2 -->
                                    <div id="metroModal" class="modal modal-metro border-mauve hide fade" tabindex="-1" role="dialog" aria-labelledby="sampleModal2" aria-hidden="true">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h3 id="sampleModal2">Modal Heading</h3>
                                        </div>
                                        <div class="modal-body">
                                            <h4>Modal metro style</h4>
                                            <p>add class <code>.modal-metro</code> to activate this style, and you can also set colour of border left with class <code>.border-black</code>, etc.</p>
                                            <h4>Choose a color:</h4>
                                            <div class="well clearfix">
                                                <ul class="theme-switcher" data-target="#metroModal" data-target-class="modal modal-metro">
                                                    <li><a href="#" class="bg-lime" data-theme="border-lime">Default</a></li>
                                                    <li><a href="#" class="bg-green" data-theme="border-green">Green</a></li>
                                                    <li><a href="#" class="bg-emerald" data-theme="border-emerald">Emerald</a></li>
                                                    <li><a href="#" class="bg-teal" data-theme="border-teal">Teal</a></li>
                                                    <li><a href="#" class="bg-cyan" data-theme="border-cyan">Cyan</a></li>
                                                    <li><a href="#" class="bg-cobalt" data-theme="border-cobalt">Cobalt</a></li>
                                                    <li><a href="#" class="bg-indigo" data-theme="border-indigo">Indigo</a></li>
                                                    <li><a href="#" class="bg-violet" data-theme="border-violet">Violet</a></li>
                                                    <li><a href="#" class="bg-pink" data-theme="border-pink">Pink</a></li>
                                                    <li><a href="#" class="bg-magenta" data-theme="border-magenta">Magenta</a></li>
                                                    <li><a href="#" class="bg-crimson" data-theme="border-crimson">Crimson</a></li>
                                                    <li><a href="#" class="bg-red" data-theme="border-red">Red</a></li>
                                                    <li><a href="#" class="bg-orange" data-theme="border-orange">Orange</a></li>
                                                    <li><a href="#" class="bg-amber" data-theme="border-amber">Amber</a></li>
                                                    <li><a href="#" class="bg-yellow" data-theme="border-yellow">Yellow</a></li>
                                                    <li><a href="#" class="bg-brown" data-theme="border-brown">Brown</a></li>
                                                    <li><a href="#" class="bg-olive" data-theme="border-olive">Olive</a></li>
                                                    <li><a href="#" class="bg-steel" data-theme="border-steel">Steel</a></li>
                                                    <li><a href="#" class="bg-mauve" data-theme="border-mauve">Mauve</a></li>
                                                    <li><a href="#" class="bg-taupe" data-theme="border-taupe">Taupe</a></li>
                                                    <li><a href="#" class="bg-black" data-theme="border-black">Black</a></li>
                                                    <li><a href="#" class="bg-silver" data-theme="border-silver">Silver</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn btn-link" title="back"><i class="aweso-circle-arrow-left"></i></button>
                                            <button class="btn btn-link" data-dismiss="modal" title="save changes"><i class="aweso-circle-arrow-right"></i></button>
                                        </div>
                                    </div><!-- /sample modal #2 -->

                                    <!-- sample modal #3 -->
                                    <div id="largeModal" class="modal modal-large bg-mauve hide fade" tabindex="-1" role="dialog" aria-labelledby="sampleModal3" aria-hidden="true">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h3 id="sampleModal3">Modal Heading</h3>
                                        </div>
                                        <div class="modal-body">
                                            <h4>Modal large style</h4>
                                            <p>add class <code>.modal-large</code> to activate this style, and you can also set colour of modal with class <code>.bg-black</code>, etc.</p>
                                            <h4>Choose a color:</h4>
                                            <ul class="theme-switcher" data-target="#largeModal" data-target-class="modal modal-large">
                                                <li><a href="#" class="bg-lime" data-theme="bg-lime">Default</a></li>
                                                <li><a href="#" class="bg-green" data-theme="bg-green">Green</a></li>
                                                <li><a href="#" class="bg-emerald" data-theme="bg-emerald">Emerald</a></li>
                                                <li><a href="#" class="bg-teal" data-theme="bg-teal">Teal</a></li>
                                                <li><a href="#" class="bg-cyan" data-theme="bg-cyan">Cyan</a></li>
                                                <li><a href="#" class="bg-cobalt" data-theme="bg-cobalt">Cobalt</a></li>
                                                <li><a href="#" class="bg-indigo" data-theme="bg-indigo">Indigo</a></li>
                                                <li><a href="#" class="bg-violet" data-theme="bg-violet">Violet</a></li>
                                                <li><a href="#" class="bg-pink" data-theme="bg-pink">Pink</a></li>
                                                <li><a href="#" class="bg-magenta" data-theme="bg-magenta">Magenta</a></li>
                                                <li><a href="#" class="bg-crimson" data-theme="bg-crimson">Crimson</a></li>
                                                <li><a href="#" class="bg-red" data-theme="bg-red">Red</a></li>
                                                <li><a href="#" class="bg-orange" data-theme="bg-orange">Orange</a></li>
                                                <li><a href="#" class="bg-amber" data-theme="bg-amber">Amber</a></li>
                                                <li><a href="#" class="bg-yellow" data-theme="bg-yellow">Yellow</a></li>
                                                <li><a href="#" class="bg-brown" data-theme="bg-brown">Brown</a></li>
                                                <li><a href="#" class="bg-olive" data-theme="bg-olive">Olive</a></li>
                                                <li><a href="#" class="bg-steel" data-theme="bg-steel">Steel</a></li>
                                                <li><a href="#" class="bg-mauve" data-theme="bg-mauve">Mauve</a></li>
                                                <li><a href="#" class="bg-taupe" data-theme="bg-taupe">Taupe</a></li>
                                                <li><a href="#" class="bg-black" data-theme="bg-black">Black</a></li>
                                                <li><a href="#" class="bg-silver" data-theme="bg-silver">Silver</a></li>
                                            </ul>
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn btn-link" title="back"><i class="aweso-circle-arrow-left"></i></button>
                                            <button class="btn btn-link" data-dismiss="modal" title="save changes"><i class="aweso-circle-arrow-right"></i></button>
                                        </div>
                                    </div><!-- /sample modal #3 -->
                                    
                                    
                                    <!-- widget modal -->
                                    <div class="widget bg-mauve" id="widget-modal">
                                        <!-- widget header -->
                                        <div class="widget-header">
                                            <!-- widget icon -->
                                            <div class="widget-icon"><i class="aweso-magnet"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Modal</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-modal" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
                                            <div class="stilearn-block-demo" style="padding-bottom: 24px;">
                                                <a data-toggle="modal" href="#defaultModal" class="btn bg-mauve bordered">Default modal</a>
                                                <a data-toggle="modal" href="#metroModal" class="btn btn-danger bordered">Metro Modal</a>
                                                <a data-toggle="modal" href="#largeModal" class="btn btn-inverse bordered">Large Modal</a>
                                            </div>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget modal -->



                                    <!-- LOADERS
                                    ================================================== -->
                                    <!-- widget loader-->
                                    <div class="widget bg-crimson" id="widget-loader">
                                        <!-- widget header -->
                                        <div class="widget-header">
                                            <!-- widget icon -->
                                            <div class="widget-icon">
                                                <img class="preload-small" src="img/preload-1-white.gif" alt="" />
                                            </div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Loaders</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-loader" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <p>We provide 10 loaders in black and white that you can use on the splash page, ajax or something else. You can also resize them by adding class <code>.preload-mini</code>, <code>.preload-small</code>, <code>.preload-medium</code> or <code>.preload-large</code> to your loader.</p>
                                            <div class="stilearn-block-demo">
                                                <img class="preload-small" src="img/preload-1-white.gif" alt="" />
                                                <img class="preload-small" src="img/preload-2-white.gif" alt="" />
                                                <img class="preload-small" src="img/preload-3-white.gif" alt="" />
                                                <img class="preload-small" src="img/preload-4-white.gif" alt="" />
                                                <img class="preload-small" src="img/preload-5-white.gif" alt="" />
                                                <img class="preload-small" src="img/preload-6-white.gif" alt="" />
                                                <img class="preload-small" src="img/preload-7-white.gif" alt="" />
                                                <img class="preload-small" src="img/preload-8-white.gif" alt="" />
                                                <img class="preload-small" src="img/preload-9-white.gif" alt="" />
                                                <img class="preload-small" src="img/preload-10-white.gif" alt="" />
                                            </div>

                                            <div class="stilearn-block-demo">
                                                <img class="preload-small" src="img/preload-1-black.gif" alt="" />
                                                <img class="preload-small" src="img/preload-2-black.gif" alt="" />
                                                <img class="preload-small" src="img/preload-3-black.gif" alt="" />
                                                <img class="preload-small" src="img/preload-4-black.gif" alt="" />
                                                <img class="preload-small" src="img/preload-5-black.gif" alt="" />
                                                <img class="preload-small" src="img/preload-6-black.gif" alt="" />
                                                <img class="preload-small" src="img/preload-7-black.gif" alt="" />
                                                <img class="preload-small" src="img/preload-8-black.gif" alt="" />
                                                <img class="preload-small" src="img/preload-9-black.gif" alt="" />
                                                <img class="preload-small" src="img/preload-10-black.gif" alt="" />
                                            </div>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget loader-->



                                    <!-- LABELS & BADGES
                                    ================================================== -->
                                    <!-- widget Labels and badges -->
                                    <div class="widget bg-amber" id="widget-labels-badges">
                                        <!-- widget header -->
                                        <div class="widget-header">
                                            <!-- widget icon -->
                                            <div class="widget-icon"><i class="aweso-magnet"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Labels and badges</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-labels-badges" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <h3>Labels</h3>
                                            <div class="stilearn-block-demo stilearn-block-demo-pull">
                                                <div class="pull-left">
                                                    <p>Default</p>
                                                    <span class="label">Default</span>
                                                </div>
                                                <div class="pull-left">
                                                    <p>Success</p>
                                                    <span class="label label-success">Success</span>
                                                </div>
                                                <div class="pull-left">
                                                    <p>Warning</p>
                                                    <span class="label label-warning">Warning</span>
                                                </div>
                                                <div class="pull-left">
                                                    <p>Important</p>
                                                    <span class="label label-important">Important</span>
                                                </div>
                                                <div class="pull-left">
                                                    <p>Info</p>
                                                    <span class="label label-info">Info</span>
                                                </div>
                                                <div class="pull-left">
                                                    <p>Inverse</p>
                                                    <span class="label label-inverse">Inverse</span>
                                                </div>
                                                <div class="clearfix"></div>
                                            </div>

                                            <!-- badge -->
                                            <h3>Badges</h3>
                                            <div class="stilearn-block-demo stilearn-block-demo-pull">
                                                <div class="pull-left">
                                                    <p>Default</p>
                                                    <span class="badge">1</span>
                                                </div>
                                                <div class="pull-left">
                                                    <p>Success</p>
                                                    <span class="badge badge-success">2</span>
                                                </div>
                                                <div class="pull-left">
                                                    <p>Warning</p>
                                                    <span class="badge badge-warning">4</span>
                                                </div>
                                                <div class="pull-left">
                                                    <p>Important</p>
                                                    <span class="badge badge-important">6</span>
                                                </div>
                                                <div class="pull-left">
                                                    <p>Info</p>
                                                    <span class="badge badge-info">8</span>
                                                </div>
                                                <div class="pull-left">
                                                    <p>Inverse</p>
                                                    <span class="badge badge-inverse">10</span>
                                                </div>
                                                <div class="clearfix"></div>
                                            </div>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget label & badge -->



                                    <!-- ALERTS
                                    ================================================== -->
                                    <!-- widget alerts -->
                                    <div class="widget bg-emerald" id="widget-alerts">
                                        <!-- widget header -->
                                        <div class="widget-header">
                                            <!-- widget icon -->
                                            <div class="widget-icon"><i class="aweso-magnet"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Alerts</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-alerts" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.</p>
                                            <div class="stilearn-block-demo">
                                                <div class="alert">
                                                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                                                    <strong>Warning!</strong> Best check yo self, you're not looking too good.
                                                </div>
                                            </div>

                                            <!-- options -->
                                            <h2>Options</h2>
                                            <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
                                            <div class="stilearn-block-demo">
                                                <div class="alert alert-block">
                                                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                                                    <h4>Warning!</h4>
                                                    <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
                                                </div>
                                            </div>

                                            <!-- alternatives -->
                                            <h2>Contextual alternatives</h2>
                                            <p>Add optional classes to change an alert's connotation.</p>
                                            <div class="stilearn-block-demo">
                                                <p class="lead">Error or danger</p>
                                                <div class="alert alert-error">
                                                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                                                    <strong>Oh snap!</strong> Change a few things up and try submitting again.
                                                </div>
                                                <p class="lead">Success</p>
                                                <div class="alert alert-success">
                                                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                                                    <strong>Well done!</strong> You successfully read this important alert message.
                                                </div>
                                                <p class="lead">Information</p>
                                                <div class="alert alert-info">
                                                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                                                    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                                                </div>
                                                <p class="lead">Example alert</p>
                                                <div class="alert alert-block alert-error fade in">
                                                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                                                    <h4 class="alert-heading">Oh snap! You got an error!</h4>
                                                    <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
                                                    <p>
                                                        <a class="btn btn-danger" href="#">action</a> <a class="btn" href="#">Or do this</a>
                                                    </p>
                                                </div>
                                            </div>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget alerts -->



                                </div><!-- /span right -->
                            </div><!-- row #1 -->

                            <!-- row #2 -->
                            <div class="row-fluid">
                                <!-- span nav -->
                                <div class="span12">
                                    <!-- Navbar, Tabs, & Pills
                                    ================================================== -->
                                    <!-- widget navs -->
                                    <div class="widget bg-crimson" id="widget-navs">
                                        <!-- widget header -->
                                        <div class="widget-header">
                                            <!-- widget icon -->
                                            <div class="widget-icon"><i class="aweso-magnet"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Nav: stackable and navbar</h4>
                                            <!-- widget action, you can also the btn, btn-group, or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-navs" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <!-- Stackable -->
                                            <h2>Stackable</h2>
                                            <p>As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.</p>
                                            <h3>Stacked tabs</h3>
                                            <div class="stilearn-block-demo">
                                                <ul class="nav nav-tabs nav-stacked" style="max-width: 420px">
                                                    <li class="active"><a href="#">Home</a></li>
                                                    <li><a href="#">Profile</a></li>
                                                    <li><a href="#">Messages</a></li>
                                                </ul>
                                            </div>
                                            <h3>Stacked pills</h3>
                                            <div class="stilearn-block-demo">
                                                <ul class="nav nav-pills nav-stacked" style="max-width: 420px">
                                                    <li class="active"><a href="#">Home</a></li>
                                                    <li><a href="#">Profile</a></li>
                                                    <li><a href="#">Messages</a></li>
                                                </ul>
                                            </div>

                                            <!-- Navbar -->
                                            <h2>Responsive navbar</h2>
                                            <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
                                            <div class="stilearn-block-demo">
                                                <div class="navbar">
                                                    <div class="navbar-inner">
                                                        <div class="container">
                                                            <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                                                                <span class="icon-bar"></span>
                                                                <span class="icon-bar"></span>
                                                                <span class="icon-bar"></span>
                                                            </a>
                                                            <a class="brand" href="#">Title</a>
                                                            <div class="nav-collapse collapse navbar-responsive-collapse">
                                                                <ul class="nav">
                                                                    <li class="active"><a href="#">Home</a></li>
                                                                    <li><a href="#">Link</a></li>
                                                                    <li><a href="#">Link</a></li>
                                                                    <li class="dropdown">
                                                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="aweso-angle-down"></i></a>
                                                                        <ul class="dropdown-menu">
                                                                            <li class="active"><a href="#">Action</a></li>
                                                                            <li><a href="#">Another action</a></li>
                                                                            <li><a href="#">Something else here</a></li>
                                                                            <li class="divider"></li>
                                                                            <li class="nav-header">Nav header</li>
                                                                            <li><a href="#">Separated link</a></li>
                                                                            <li><a href="#">One more separated link</a></li>
                                                                        </ul>
                                                                    </li>
                                                                </ul>
                                                                <form class="navbar-search pull-left" action="" />
                                                                    <input type="text" class="search-query input-block-level" placeholder="Search" />
                                                                </form>
                                                                <ul class="nav pull-right">
                                                                    <li><a href="#">Link</a></li>
                                                                    <li class="divider-vertical"></li>
                                                                    <li class="dropdown">
                                                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="aweso-angle-down"></i></a>
                                                                        <ul class="dropdown-menu">
                                                                            <li><a href="#">Action</a></li>
                                                                            <li><a href="#">Another action</a></li>
                                                                            <li><a href="#">Something else here</a></li>
                                                                            <li class="divider"></li>
                                                                            <li><a href="#">Separated link</a></li>
                                                                        </ul>
                                                                    </li>
                                                                </ul>
                                                            </div><!-- /.nav-collapse -->
                                                        </div>
                                                    </div><!-- /navbar-inner -->
                                                </div><!-- /navbar -->
                                            </div>
                                            <div class="alert alert-info">
                                                <strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
                                            </div>
                                            <h2>Inverted & themes variation</h2>
                                            <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>, <code>.navbar-lime</code>, etc.</p>
                                            <div class="stilearn-block-demo">
                                                <div id="navbar" class="navbar navbar-inverse" style="position: static;">
                                                    <div class="navbar-inner">
                                                        <div class="container">
                                                            <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                                                                <span class="icon-bar"></span>
                                                                <span class="icon-bar"></span>
                                                                <span class="icon-bar"></span>
                                                            </a>
                                                            <a class="brand" href="#">Title</a>
                                                            <div class="nav-collapse collapse navbar-inverse-collapse">
                                                                <ul class="nav">
                                                                    <li class="active"><a href="#">Home</a></li>
                                                                    <li><a href="#">Link</a></li>
                                                                    <li><a href="#">Link</a></li>
                                                                    <li class="dropdown">
                                                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="aweso-angle-down"></i></a>
                                                                        <ul class="dropdown-menu">
                                                                            <li class="active"><a href="#">Action</a></li>
                                                                            <li><a href="#">Another action</a></li>
                                                                            <li><a href="#">Something else here</a></li>
                                                                            <li class="divider"></li>
                                                                            <li class="nav-header">Nav header</li>
                                                                            <li><a href="#">Separated link</a></li>
                                                                            <li><a href="#">One more separated link</a></li>
                                                                        </ul>
                                                                    </li>
                                                                </ul>
                                                                <form class="navbar-search pull-left" action="" />
                                                                    <input type="text" class="search-query input-block-level" placeholder="Search" />
                                                                </form>
                                                                <ul class="nav pull-right">
                                                                    <li><a href="#">Link</a></li>
                                                                    <li class="divider-vertical"></li>
                                                                    <li class="dropdown">
                                                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="aweso-angle-down"></i></a>
                                                                        <ul class="dropdown-menu">
                                                                            <li><a href="#">Action</a></li>
                                                                            <li><a href="#">Another action</a></li>
                                                                            <li><a href="#">Something else here</a></li>
                                                                            <li class="divider"></li>
                                                                            <li><a href="#">Separated link</a></li>
                                                                        </ul>
                                                                    </li>
                                                                </ul>
                                                            </div><!-- /.nav-collapse -->
                                                        </div>
                                                    </div><!-- /navbar-inner -->
                                                </div><!-- /navbar -->

                                                <h4>Choose a color:</h4>
                                                <ul class="theme-switcher" data-target="#navbar" data-target-class="navbar">
                                                    <li><a href="#" class="bg-lime" data-theme="navbar-lime">Lime</a></li>
                                                    <li><a href="#" class="bg-green" data-theme="navbar-green">Green</a></li>
                                                    <li><a href="#" class="bg-emerald" data-theme="navbar-emerald">Emerald</a></li>
                                                    <li><a href="#" class="bg-teal" data-theme="navbar-teal">Teal</a></li>
                                                    <li><a href="#" class="bg-cyan" data-theme="navbar-cyan">Cyan</a></li>
                                                    <li><a href="#" class="bg-cobalt" data-theme="navbar-cobalt">Cobalt</a></li>
                                                    <li><a href="#" class="bg-indigo" data-theme="navbar-indigo">Indigo</a></li>
                                                    <li><a href="#" class="bg-violet" data-theme="navbar-violet">Violet</a></li>
                                                    <li><a href="#" class="bg-pink" data-theme="navbar-pink">Pink</a></li>
                                                    <li><a href="#" class="bg-magenta" data-theme="navbar-magenta">Magenta</a></li>
                                                    <li><a href="#" class="bg-crimson" data-theme="navbar-crimson">Crimson</a></li>
                                                    <li><a href="#" class="bg-red" data-theme="navbar-red">Red</a></li>
                                                    <li><a href="#" class="bg-orange" data-theme="navbar-orange">Orange</a></li>
                                                    <li><a href="#" class="bg-amber" data-theme="navbar-amber">Amber</a></li>
                                                    <li><a href="#" class="bg-yellow" data-theme="navbar-yellow">Yellow</a></li>
                                                    <li><a href="#" class="bg-brown" data-theme="navbar-brown">Brown</a></li>
                                                    <li><a href="#" class="bg-olive" data-theme="navbar-olive">Olive</a></li>
                                                    <li><a href="#" class="bg-steel" data-theme="navbar-steel">Steel</a></li>
                                                    <li><a href="#" class="bg-mauve" data-theme="navbar-mauve">Mauve</a></li>
                                                    <li><a href="#" class="bg-taupe" data-theme="navbar-taupe">Taupe</a></li>
                                                    <li><a href="#" class="bg-black" data-theme="navbar-inverse">Inverse</a></li>
                                                </ul>
                                            </div>

                                        </div><!-- /widget content -->
                                    </div> <!-- /widget navs -->
                                </div><!-- /span nav -->
                            </div><!-- row #2 -->

                            <!-- row #3 -->
                            <div class="row-fluid">
                                <!-- span thumbnails -->
                                <div class="span12">
                                    <!-- Thumbnails
                                    ================================================== -->
                                    <!-- widget thumbnails -->
                                    <div class="widget bg-orange" id="widget-thumbnails">
                                        <!-- widget header -->
                                        <div class="widget-header">
                                            <!-- widget icon -->
                                            <div class="widget-icon"><i class="aweso-magnet"></i></div>
                                            <!-- widget title -->
                                            <h4 class="widget-title">Thumbnails</h4>
                                            <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                            <div class="widget-action">
                                                <button data-toggle="collapse" data-collapse="#widget-thumbnails" class="btn">
                                                    <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                                </button>
                                            </div>
                                        </div><!-- /widget header -->

                                        <!-- widget content -->
                                        <div class="widget-content">
                                            <h2>Default thumbnails</h2>
                                            <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
                                            <ul class="thumbnails row-fluid">
                                                <li class="span3">
                                                    <a href="#" class="thumbnail">
                                                        <img data-src="holder.js/320x180/industrial/text:Thumbnail" alt="" />
                                                    </a>
                                                </li>
                                                <li class="span3">
                                                    <a href="#" class="thumbnail">
                                                        <img data-src="holder.js/320x180/social/text:Thumbnail" alt="" />
                                                    </a>
                                                </li>
                                                <li class="span3">
                                                    <a href="#" class="thumbnail">
                                                        <img data-src="holder.js/320x180/industrial/text:Thumbnail" alt="" />
                                                    </a>
                                                </li>
                                                <li class="span3">
                                                    <a href="#" class="thumbnail">
                                                        <img data-src="holder.js/320x180/social/text:Thumbnail" alt="" />
                                                    </a>
                                                </li>
                                            </ul>

                                            <h2>Highly customizable</h2>
                                            <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
                                            <div class="row-fluid">
                                                <ul class="thumbnails">
                                                    <li class="span4">
                                                        <div class="thumbnail">
                                                            <img data-src="holder.js/420x200/social/text:Thumbnail" alt="" />
                                                            <div class="caption">
                                                                <h3>Thumbnail label</h3>
                                                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                                                <p><a href="#" class="btn btn-info bordered">Action</a> <a href="#" class="btn bordered">Action</a></p>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="span4">
                                                        <div class="thumbnail">
                                                            <img data-src="holder.js/420x200/industrial/text:Thumbnail" alt="" />
                                                            <div class="caption bg-transparent clearfix">
                                                                <h3>Thumbnail label</h3>
                                                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                                                <p class="pull-right"><a href="#" class="btn bordered">Action</a> <a href="#" class="btn btn-inverse bordered">Action</a></p>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="span4">
                                                        <div class="thumbnail">
                                                            <img data-src="holder.js/420x200/social/text:Thumbnail" alt="" />
                                                            <div class="caption bg-white">
                                                                <h3>Thumbnail label</h3>
                                                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                                                <p><a href="#" class="btn btn-block bg-emerald bordered">Action</a></p>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div><!-- /widget content -->
                                    </div> <!-- /widget thumbnails -->

                                </div><!-- /span thumbnails -->
                            </div><!-- /row #3 -->

                        </div><!-- /content-inner -->
                    </div><!-- /main-content -->

                </article> <!-- /content page -->
                
                
            </div> <!--/ end content -->            
        </section> <!-- /end section content-->
        
        
        <!-- footer, I place the footer on here. -->
        <footer class="footer">
            <p>Copyright &copy; 2013. All Right Reserved.</p>
        </footer><!--/ footer -->
        
        
        
        
        <!-- javascript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/sparkline/jquery.sparkline.min.js"></script>
        
        <script type="text/javascript" src="js/metro-base.js"></script>
        <script type="text/javascript" src="js/holder/holder.js"></script>
        
    </body>
</html>
